<template>
  <a-form class="ivz-right-model" :model="tabsModel" ref="formModelRef"
          :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-tabs v-model:activeKey="active" @change="callback">
      <template v-for="(tab, key) in tabsMetas" :key="key">
        <a-tab-pane :tab="tab.label">
          <template v-for="item in tab.metas">
            <a-divider v-if="item.type == 'divider'" :key="item.id" dashed>{{item.title}}</a-divider>
            <ivz-right-form-item v-else :item="item" :model="tabsModel" :key="item.id" />
          </template>
        </a-tab-pane>
      </template>
    </a-tabs>
  </a-form>
</template>

<script>
import {mapGetters} from 'vuex'
import IvzRightFormItem from "@/components/IvzRightFormItem.vue";
import {EventBus, EventType} from "@/event";

export default {
    name: "IvzOnlineRight",
    components: {IvzRightFormItem},
    data() {
        return {
          active: 'basic',
          labelCol: {span: 7},
          wrapperCol: {span: 16},
        }
    },
  computed: {
    ...mapGetters(['tabsMetas', 'tabsModel', 'activeMetaTab'])
  },
    created() {
        EventBus.listener(EventType.switchTab, tab => {
          this.active = tab || this.active;
        })
    },
    updated() { },
    methods: {
      callback() {},
      validateForm(prop) {
          this.$refs['formModelRef'].validateField(prop)
      }
    }
}
</script>

<style>
    .ivz-right-model .ant-form-item {
        margin-bottom: 6px;
    }
    .ivz-right-model .ant-tabs-tab {
      margin: 0px 16px 0px 0px;
    }
</style>
